<h1 id="github-markdown-css"><a href="#github-markdown-css" class="headerlink" title="github-markdown-css"></a>github-markdown-css</h1><blockquote>
<p>The minimal amount of CSS to replicate the GitHub Markdown style</p>
</blockquote>
<p><strong>The CSS is generated. Contributions should go to <a href="https://github.com/sindresorhus/generate-github-markdown-css">this repo</a>.</strong></p>
<p><a href="http://sindresorhus.com/github-markdown-css"><img src="https://cloud.githubusercontent.com/assets/170270/5219062/f22a978c-7685-11e4-8316-af25b6c89bc0.png" width="300"></a></p>
<h2 id="Demo"><a href="#Demo" class="headerlink" title="Demo"></a><a href="https://sindresorhus.com/github-markdown-css">Demo</a></h2><h2 id="Install"><a href="#Install" class="headerlink" title="Install"></a>Install</h2><p>Download <a href="https://raw.githubusercontent.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css">manually</a>, from <a href="https://cdnjs.com/libraries/github-markdown-css">CDNJS</a>, or with npm:</p>
<pre><code>$ npm install github-markdown-css
</code></pre>
<h2 id="Usage"><a href="#Usage" class="headerlink" title="Usage"></a>Usage</h2><p>Import the <code>github-markdown.css</code> file and add a <code>markdown-body</code> class to the container of your rendered Markdown and set a width for it. GitHub uses <code>980px</code> width and <code>45px</code> padding, and <code>15px</code> padding for mobile.</p>
<pre><code class="html">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;github-markdown.css&quot;&gt;
&lt;style&gt;
    .markdown-body {
        box-sizing: border-box;
        min-width: 200px;
        max-width: 980px;
        margin: 0 auto;
        padding: 45px;
    }

    @media (max-width: 767px) {
        .markdown-body {
            padding: 15px;
        }
    }
&lt;/style&gt;
&lt;article class=&quot;markdown-body&quot;&gt;
    &lt;h1&gt;Unicorns&lt;/h1&gt;
    &lt;p&gt;All the things&lt;/p&gt;
&lt;/article&gt;
</code></pre>
<p>If you want code syntax highlighted, use GitHub Flavored Markdown rendered from <a href="https://docs.github.com/en/free-pro-team@latest/rest/reference/markdown">GitHub’s <code>/markdown</code> API</a>.</p>
<p>There are 3 themes provided in this package:</p>
<ul>
<li><strong>github-markdown.css</strong>: (default) Automatically switches between light and dark through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme"><code>@media (prefers-color-scheme)</code></a>.</li>
<li><strong>github-markdown-light.css</strong>: Light-only.</li>
<li><strong>github-markdown-dark.css</strong>: Dark-only.</li>
</ul>
<p>You may know that now GitHub supports more than 2 themes including <code>dark_dimmed</code>, <code>dark_high_contrast</code> and <code>colorblind</code> variants. If you want to try these themes, you can generate them on your own! See next section.</p>
<h2 id="How"><a href="#How" class="headerlink" title="How"></a>How</h2><p>See <a href="https://github.com/sindresorhus/generate-github-markdown-css"><code>generate-github-markdown-css</code></a> for how it’s generated and ability to generate your own.</p>
<h2 id="Dev"><a href="#Dev" class="headerlink" title="Dev"></a>Dev</h2><p>Run <code>npm run make</code> to update the CSS.</p>
